<script setup>

import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";
import dayjs from "dayjs";

//接收BasicLayout页面传的参数
const route = useRoute();
const info = reactive({
  identity: route.query.identity,
  typeId: route.query.typeId
})
const data = ref({
  customAndRoomInfo:{
    count:'',
    endTime:'',
    identity:'',
    name:'',
    phone:'',
    price:'',
    startTime:'',
    typeId:''
  },
  customerId:'',
  roomId:'',
  roomName:''
});
onMounted(async () => {

  const res = await myAxios.get('/admin/current')
  console.log("res:",res.data.data)
  //只有路径参数存在才发送请求
  if (res.data.data.password === null){
    const res = await myAxios.get('/menu/living/info',{
      params:{
        identity: info.identity,
        typeId: info.typeId
      }
    })
    if (res){
      data.value = res.data.data;
      //使用day.js格式化时间
      data.value.customAndRoomInfo.startTime = dayjs(data.value.customAndRoomInfo.startTime).format("YYYY-MM-DD");
      data.value.customAndRoomInfo.endTime = dayjs(data.value.customAndRoomInfo.endTime).format("YYYY-MM-DD");
      //TODO 将顾客ID存进localstorage中
      localStorage.setItem("customerId",data.value.customerId);
      Message.success("加载成功")
    }else
      Message.error("加载失败")
    console.log("res:",res);
    console.log("data:",data.value);
  }
})
</script>

<template>
  <div style="margin-left: 20px;margin-right: 20px">
    <a-row :gutter="20">
      <a-col :span="12">
        <a-card  title="住房信息" :bordered="false" :style="{ width: '100%' } ">
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span v-if="info.typeId === '0'">房间型号：大床房</span>
            <span v-if="info.typeId === '1'">房间型号：双床房</span>
            <span v-if="info.typeId === '2'">房间型号：小床房</span>
          </div>
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span >住房花费：{{data.customAndRoomInfo.price}}元</span>
            <span >房间号：{{data.roomId}}</span>
          </div>
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span>入住时间：{{data.customAndRoomInfo.startTime}}</span>
            <span>退房时间：{{data.customAndRoomInfo.endTime}}</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="顾客信息" :bordered="false" :style="{ width: '100%' }">
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span >姓名：{{data.customAndRoomInfo.name}}</span>
          </div>
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span >电话：{{data.customAndRoomInfo.phone}}</span>
          </div>
          <div style="display: flex; justify-content: space-between;margin-top: 10px">
            <span >身份证号：{{data.customAndRoomInfo.identity}}</span>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>

</style>